<template>
  <selectModalApi
    v-bind="accountPanel"
    :columns="columns"
    :moreColumn="moreColumns"
    :formColumns="formColumns"
    :isSingleCheck="isSingleCheck"
    :selectionData="selectionData"
    @submit="submit"
    @submitSingleCheck="submit"
  >
  </selectModalApi>
</template>

<script>
    import selectModalApi from './selectModalApi';
    export default {
        components: { selectModalApi },
        props: {
            isSingleCheck: {
                default: () => {
                    return false;
                }
            },
            accountPanel: {
                default: () => {
                    return {
                        width: 1024,
                        zIndex: 100,
                        titleStyle: {},
                        drawer: {
                            show: false
                        },
                        cols: 2,
                        data: {}
                    };
                }
            },
            selectionData: {
                default: () => {
                    return [];
                }
            }
        },
        data () {
            return {

            };
        },
        computed: {
            // 绑定选择项查询字段
            formColumns () {
                return [
                    {
                        key: 'userName',
                        title: {
                            'zh-CN': '用户名',
                            'en-US': 'userName'
                        }[this.G_Locale],
                        minWidth: 100,
                        align: 'center',
                        config: { type: 'text' }
                    },
                    {
                        key: 'mobilePhone',
                        title: {
                            'zh-CN': '手机号',
                            'en-US': 'mobilePhone'
                        }[this.G_Locale],
                        minWidth: 100,
                        align: 'center',
                        config: { type: 'text' }
                    }
                ];
            },
            // 绑定选择项列字段
            columns () {
                return [
                    {
                        key: 'userName',
                        title: {
                            'zh-CN': '用户名',
                            'en-US': 'userName'
                        }[this.G_Locale],
                        minWidth: 100,
                        align: 'center',
                        show: true
                    },
                    {
                        key: 'account',
                        title: {
                            'zh-CN': '登录账号',
                            'en-US': 'account'
                        }[this.G_Locale],
                        minWidth: 100,
                        align: 'center',
                        show: true
                    },
                    {
                        key: 'mobilePhone',
                        title: {
                            'zh-CN': '手机号',
                            'en-US': 'mobilePhone'
                        }[this.G_Locale],
                        minWidth: 100,
                        align: 'center',
                        show: true
                    },
                    {
                        key: 'email',
                        title: {
                            'zh-CN': '邮箱',
                            'en-US': 'email'
                        }[this.G_Locale],
                        minWidth: 100,
                        align: 'center',
                        show: true
                    },
                    {
                        key: 'genderCode',
                        title: {
                            'zh-CN': '性别',
                            'en-US': 'gender'
                        }[this.G_Locale],
                        minWidth: 100,
                        align: 'center',
                        show: true,
                        render: (h, params) => {
                            return h('div', {}, `${this.getGender(params.row.genderCode)}`)
                        }
                    },
                    {
                        key: 'useStateCode',
                        title: {
                            'zh-CN': '状态',
                            'en-US': 'useStateCode'
                        }[this.G_Locale],
                        minWidth: 100,
                        align: 'center',
                        show: true,
                        render: (h, params) => {
                            return h('div', {}, `${this.getUseStateCode(params.row.useStateCode)}`)
                        }
                    }
                ];
            },
            // 绑定选择项列表更多字段
            moreColumns () {
                return {
                    type: 'expand',
                    slot: 'expand',
                    width: 40,
                    render: (h, params) => {
                        return h('div', [
                            h('div', `${this.lang['remark']}:${params.row.remark || ''}`)
                        ])
                    }
                }
            },
            lang () {
                return {
                    'en-US': {
                        remark: 'remark'
                    },
                    'zh-CN': {
                        remark: '备注'
                    }
                }[this.G_Locale];
            }
        },
        methods: {
            submit (data) {
                this.$emit('submit', data)
            },
            getGender (code) {
                switch (code) {
                case '1':
                    return '男';
                case '2':
                    return '女';
                }
            },
            getUseStateCode (status) {
                switch (status) {
                case '1':
                    return '正常';
                case '2':
                    return '冻结';
                case '3':
                    return '关闭';
                default:
                    return '';
                }
            }
        }
    };
</script>
<style scoped lang="scss"></style>
